<template>
  <div class="user-container">
    <el-button type="success" class="add_user" @click="insertUser">添加用户</el-button>
    <el-table :data="userData" border style="width: 100%">
      <el-table-column  label="avatar">
        <template slot-scope="scope">
         <el-avatar shape="square" :src="scope.row.avatar"></el-avatar>
      </template>
      </el-table-column>
      <el-table-column prop="_id" label="ID" width="250"> </el-table-column>
      <el-table-column prop="username" label="姓名" width="150"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="role" label="角色" width="150"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination class="pag" background
    layout="total, prev, pager, next"
    :page-count="pageCount"
    :page-size="pageSize"
    :total="pageTotal"
    :current-page="currentPage"
    @current-change="handleCurrentChange"> </el-pagination>
  </div>
</template>

<script>
import eventBus from '@/plugins/eventBus.js'

export default {
  name: 'User',
  data () {
    return {
      userData: [],
      shareUser: {
        index: -1,
        info: {}
      },
      // 当前页数
      currentPage: 1,
      pageCount: 1,
      pageTotal: 1,
      pageSize: 10
    }
  },
  methods: {
    async submit () {
      const res = await this.$api.getInfo()
      console.log(res)
    },
    async initAllUsersInfo (val) {
      const res = await this.$api.usersInfo(val)
      this.userData = res.data.data
      // 总页数
      this.pageCount = res.data.pagecount
      // 总条数
      this.pageTotal = res.data.count
      // 每页显示条数
      this.pageSize = res.data.pagesize
      console.log(this.userData)
    },
    handleEdit (index, row) {
      // console.log(index, row)
      this.shareUser = {
        index,
        info: row
      }
      this.$router.push('/system/home/edituserinfo')
    },
    // 注销用户
    handleDelete (index, row) {
      // console.log(index, row)
      // const id = row._id
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.deleteUserInfo({ id: row._id })
        // console.log(res)
        if (res.data.err_code === 0) {
          this.$notify({
            title: '成功',
            type: 'success',
            message: '删除成功!'
          })
          this.initAllUsersInfo()
        }
      }).catch(() => {
        this.$notify.info({
          title: '成功',
          message: '已取消删除'
        })
      })
    },
    async handleCurrentChange (val) {
      // console.log('val=' + val)
      const res = await this.$api.usersInfo(val)
      this.userData = res.data.data
      // console.log(res)
    },
    insertUser () {
      this.$router.replace('/system/home/insertuserinfo')
    }
  },
  created () {
    this.initAllUsersInfo()
  },
  beforeDestroy () {
    eventBus.$emit('share', this.shareUser)
  }
}
</script>

<style lang="less" scoped>
.pag {
  float: right;
  // margin-top: 10px;
  // position: absolute;
  // top: 50%;
  // right: 10px;
  margin-top: 10px;
}
.add_user {
  margin-bottom: 10px;
}
</style>
